<template>
  <div class="ecahrt-line-one">
    <vue-chart :options="defaultOptions"/>
  </div>
</template>

<script setup>
import VueChart from "@/components/VueChart.vue";
const defaultOptions = {
tooltip: {
  trigger: "axis",
  axisPointer: {
    // 坐标轴指示器，坐标轴触发有效
    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
  },
},
color: ["#18F2F9", "#FF8A00"],
grid: {
  left: "2%",
  right: "2%",
  bottom: "4%",
  top: "10%",
  containLabel: true,
},
legend: {
  data: ["计划完成投资", "实际完成投资" ],
  textStyle: {
    color: "#fff",
    fontSize: 16,
  },
  top: 6,
  right: 10,
  itemWidth: 12,
  itemHeight: 5,
  icon: "rect",
  padding: [0, 5],
  // itemGap: 35
},
xAxis: {
  type: "category",
  data: ["1月", "2月", "3月", "4月",'5月','6月','7月','8月','9月','10月','11月','12月'],
  axisLine: {
    lineStyle: {
      color: "#fff",
    },
  },
  axisLabel: {
    color: "#fff",
    fontSize: 16,
  },
  axisTick: {
    show: false,
  },
},
yAxis: {
  type: "value",
  splitLine: {
    lineStyle: {
      type: "dashed",
      color: "rgba(73, 122, 201, .6)",
    },
  },
  axisLabel: {
    color: "#fff",
    fontSize: 16,
  },
  nameTextStyle: {
    color: "rgba(132, 195, 255, 1)",
  },
},
series: [
  {
    name: "计划完成投资",
    type: "line",
    // smooth: true, //是否平滑
    showAllSymbol: true,
    // symbol: 'image://./static/images/guang-circle.png',
    symbol: "circle",
    itemStyle: {
      // 设置空心效果的关键步骤
      // color: '#fff', // 填充色设为透明、
      borderColor: "#fff", // 边框颜色
      borderWidth: 1, // 边框宽度
    },
    symbolSize: 6,
    label: {
        show: true,
        position: "bottom",
        textStyle: {
          color: "#fff",
        },
      },
    data:  [5.8, 11.7, 17.4, 23.2,29,34.8,40.6,46.4,52,58,63.8,70],
  },
  {
    name: "实际完成投资",
    type: "line",
    // smooth: true, //是否平滑
    showAllSymbol: true,
    // symbol: 'image://./static/images/guang-circle.png',
    symbol: "circle",
    itemStyle: {
      // 设置空心效果的关键步骤
      // color: '#fff', // 填充色设为透明、
      borderColor: "#fff", // 边框颜色
      borderWidth: 1, // 边框宽度
    },
    label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#fff",
        },
      },
    symbolSize: 6,
    data: [5.5, 10, 17.6, 22.4,29.7,36.1,42.6,47,52.6],

  },

],
};

</script>

<style lang="scss" scoped>
.ecahrt-line-one {
  height: 100%;
  width: 100%;
}
</style>
